<template>
	<div class="app">
		<h2 class="title" ref="title">{{ message }}</h2>
		<button @click="changeTitle" ref="btnRef">修改</button>
		<banner ref="banner"></banner>
	</div>
</template>

<script>
import Banner from './components/Banner.vue'

export default {
	components: {
		Banner,
	},

	data() {
		return {
			message: 'hello vue',
		}
	},
	methods: {
		changeTitle() {
			console.log(this.$refs)
			console.log(this.$refs.title, this.$refs.btnRef)
			console.log(this.$refs.banner)
			// 在父组件中可以自动调用子组件的对象方法
			this.$refs.banner.bannerClick()
			// 获取banner中的根元素元素(如果该组件只有一个根), 多个根获取第一个文本节点
			console.log(this.$refs.banner.$el.nextElementSibling)

			// 组件实例还有两个属性
			console.log(this.$parent) // 父组件
			console.log(this.$root) // 根组件
		},
	},
}
</script>

<style scoped></style>
